<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" session="false" %>
<%
	String path = request.getContextPath();
	pageContext.setAttribute("path", path);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home</title>
<!-- ExtJS 样式 -->
<link rel="stylesheet" type="text/css" href="${path}/script/extjs-3.2.1/resources/css/ext-all.css" />
<!-- 先引入底层驱动，一般用ext自己的，如果要使用jquery的，还要先引入jquery库 -->
<script type="text/javascript" src="${path}/script/extjs-3.2.1/adapter/ext/ext-base.js"></script>
<!-- ExtJs all -->
<script type="text/javascript" src="${path}/script/extjs-3.2.1/ext-all.js"></script>
</head>
<body>
<a href="${path}/script/extjs-3.2.1/docs/index.html">API</a>
<script type="text/javascript">
// 加载的另一种形式
//Ext.onReady(showWindow);
//function showWindow(){
//}
// 当页面加载后，使用Ext.onReady调用Ext组件
// 组建初始化过程：Component.js Ext.Component 构造函数只接收一个参数
Ext.onReady(function(){
	// 一个对象
	var o = {
		title:"很cool的窗口",
		width:500,
		height:400,
		buttons:[{text:"确定"},{text:"取消"}]
	};
	// 创建一个窗口
	var win= new Ext.Window(o);
	// window比较特殊不需要渲染，直接调用显示
	win.show();
	// 创建一个树
	var tree=new Ext.tree.TreePanel({
		title:"小树一棵",
		width:200,
		height:200,
		//renderTo: "hello", // tree.render("hello");
		root:new Ext.tree.AsyncTreeNode({
			text:"树根",children:[{text:"叶子1",leaf:true},{text:"叶子2",leaf:true}]
		})
	});
	// 事件绑定
	tree.on("render",function(){
		alert("show");
	});
	// 组件渲染，就是生成组件对应的html的dom节点，并追加到页面显示出来
	tree.render("hello");
});
</script>
<div id="hello"></div>
</body>
</html>
